<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<style type='text/css'>
    li.entry {
        cursor: pointer;
        font-size:11px;
        list-style: none;
        margin-bottom: -4px;
        line-height: 175%;
    }
    li.entry:hover {
        text-decoration:underline;
    }

    span.entries_total {
        padding-top:10px;
        padding-bottom:10px;
        display:inline-block;
        font-size:13px;
        color: rgb(20,84,183);
        font-weight:bold;
    }

    input#input_word {
        width: 300px;
        height: 28px;
        line-height: 27px;
        text-indent: 10px;
        border:solid 1px #d9d9d9; 
        border-top:solid 1px #c0c0c0; 
        border-right:none;
        font-size: 12px;
    }

    img#search_button {
        border: 0px solid #d9d9d9; 
        border-left: none;
        margin-left: -4px;
    }
</style>

<script>
    function ctrl($scope, $http) {
        $scope.query = function(word, idx) {
            $http.get("/dict/" + word + "[" + (idx + 1) + "]").success(
                    function(data) {
                        $scope.populate(data);
                    }
            );
        };

        $scope.entries = [];
        $scope.word = "";

        $scope.populate = function(w) {
            if (w != null) {
                if (w.entries != null && w.text != null) {
                    $scope.entries = w.entries;
                    $scope.word = w.text;
                    var selectedEntry = w.entries[w.selectedEntryIndex];
                    $("#_definition_").html(selectedEntry.definition);
                }
                else {
                    $("#_definition_").text(w);
                    $scope.entries = [];
                }
            }
        };

        $scope.kp = function(evt) {
            if (evt.which == 13) {
                $scope.query($scope.word, 0);
            }
        };

    <c:if test="${not empty word}">
        $scope.populate(${word});
    </c:if>
        }

        jQuery(function($) {
            $("#input_word").focus();
        });

</script>

<div class="table" ng-controller="ctrl" style="background-color:white">
    <div class="cell" style="width:180px; padding-left: 20px">
        <div class="row">
            <span class="entries_total" ng-show="entries.length > 0">
                Found {{entries.length}} entr{{entries.length == 1 ? "y" : "ies"}}.
            </span>
        </div>
        <ul class="row">
            <li class="entry" ng-repeat="e in entries" ng-click="query(word, $index)">
                {{e.text}} 
            </li>
        </ul>
    </div>
    <div class="cell" style="padding-right: 40px; padding-top:20px; padding-bottom: 25px">
        <div class="row" style="">
            <input style="vertical-align: middle" ng-keypress="kp($event)"
                   id="input_word" ng-model="word" />
            <img style="vertical-align: middle; cursor:pointer" 
                 id="search_button"
                 src="/imgs/search-button.png" ng-click="query(word, 0)" />
        </div>
        <div class="row entry" id="_definition_" >
            <c:if test="${not empty exception}">
                ${exception}
            </c:if>
        </div>
    </div>
</div>